<template>
	<!-- 在此组件中 制作一个对话框 -->
	<el-dialog title="编辑角色" :visible.sync="dialogVisible" width="40%">
		<el-form ref="form" label-width="80px" style="padding: 40px; ">
			<el-form-item label="角色名">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="角色介绍">
				<el-input v-model="form.infor"></el-input>
			</el-form-item>
			<el-form-item  label="菜单类型">
				<el-checkbox v-model="form.rolesmenus" :key="index" v-for="(menu,index) in menus" :label="menu.id">{{menu.name}}</el-checkbox>
			</el-form-item>
		</el-form>
		<p slot="footer" class="dialog-footer" style="width: 100%;text-align: center;">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="updateRole()">确定</el-button>
		</p>
	</el-dialog>
</template>

<script>
	export default{
		name:"UpdateRole",
		data() {
			return {
				dialogVisible:false,
				menus:[],
				form:{
					id:"",
					name:"",
					infor:'',
					rolesmenus:[],
				}
			}
		},
		methods: {
			findRoleById(id){
				/* 
				键值对形式传递:?id= id 
				可以直接传值 :/ + id 
				 */
				
				this.$http.get("admin/roleCtl/findRoleById/" + id).then((resp)=>{
					if(resp.data.code == 200){
						console.log(resp.data);
						this.form.id=resp.data.data.id;
						this.form.name=resp.data.data.name;
						this.form.infor=resp.data.data.infor;
						console.log(resp.data.data.rolesmenus);
						this.form.rolesmenus=resp.data.data.rolesmenus;
						
					}
				})
			},
			updateRole(){
				this.$http.post("admin/roleCtl/updateRole",this.form).then((resp)=>{
					if(resp.data.code == 200){
						this.$message({
							message: resp.data.message,
							type:'success'
						});
						this.dialogVisible=false;
						//location.reload();
						this.$router.go();
					}
					
				})
			},
		},
		mounted(){
			this.$http.get("admin/menuCtl/findMenus").then((resp)=>{
				console.log(resp.data.data);
				this.menus = resp.data.data;
			})
		}
			
	 } 
</script>

<style>
</style>
